<template>
  <div class="app-container">
    <span>Error</span>
    <embed id="em_player" :src="fileName" />
    <div id="wave1"></div>
    <button @click="play1">play</button>
    <button @click="next">next</button>
  </div>
</template>
<script>
import { defineComponent, onMounted, toRefs, reactive } from "vue";
import AnswerList from "../../assets/answerList.json";
import router from '../../router/index'
import { localGet } from "../../utils";
export default defineComponent({
  setup() {
    const state = reactive({
      fileName: "/sound/man/data1-1.wav",
      wavesurfer: null,
    });
    onMounted(() => {
      loadWave();
    });
    const loadWave = () => {
      let array=localGet("questionList")
      
      let current=window.localStorage.getItem("dataItem")
      let o=array[current]
      state.fileName =o.fileUrl
      state.wavesurfer = WaveSurfer.create({
        container: "#wave1",
        waveColor: "violet",
        progressColor: "purple",
      });
      state.wavesurfer.load(o.fileUrl);
    };
    const next = () => {
      let count = Number(window.localStorage.getItem("dataItem")) + 1;
      console.log(count);
      if (count > 19) {
        router.push("/speakinganswer");
      } else {
        window.localStorage.setItem("dataItem", count);
        router.push("/home");
      }
    };
    const play1 = () => {
      state.wavesurfer.play();
    };
    return {
      ...toRefs(state),
      play1,
      next,
    };
  },
});
</script>
<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#wave1 {
  width: 300px;
  height: 300px;
}
</style>
